<template>
	<div class="hard">
		<div class="center">
			<ul class="menu">
				<li class="mene-item" v-for="(item,index) in menu" @click="link2(item.path,item.name)" v-bind:class="{'active':item.name==name}" :key="index">
					{{item.meta.menu}}
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Hard',
		data(props) {
			return {
				menu: this.$router.options.routes[1].children,
				name: this.$router.history.current.name
			}
		},
		methods: {
			link2(path, name) {
				this.$router.replace({
					path: "/" + path
				});
				this.name = name;
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.hard {
		height: 46px;
		background-color: #333;
		color: #fff;
		display: flex;
		justify-content: center;
	}
	
	.center {
		width: 1400px;
		display: flex;
		align-items: center;
	}
	
	.menu {
		list-style: none;
		margin: 0;
		padding: 0;
		flex-direction: row;
		flex-wrap: nowrap;
		flex: 1;
	}
	
	.mene-item {
		font-size: 15px;
		height: 30px;
		line-height: 30px;
		padding: 0 20px;
		margin: 0 8px;
		display: inline-block;
	}
	
	.mene-item.active {
		color: #f2f2f2;
		background-color: #464646;
	}
	
	.mene-item:hover {
		color: #f2f2f2;
		background-color: #464646;
	}
</style>